<template>
    <div class="mytab">
        <van-tabs @change="change" v-model="active">
            <van-tab v-for="item in tabs" :key="item.id" :title="item.name">
                <batch v-for="(item,index) in list" :key="index"></batch>
            </van-tab>
        </van-tabs>
        
        <div class="btns">
            <div @click="$router.push('/user/demandAdd');"><i class="iconfont icon-jiahao"></i> 需求发布</div>
        </div>
    </div>
</template>

<script>
    import batch from '@/components/supply'
    export default {
        components: {
            batch
        },
        data() {
            return {
                tabs: [{
                    name: '全部',
                    id: 0
                }, {
                    name: '新疆棉',
                    id: 1
                }, {
                    name: '地产棉',
                    id: 2
                }, {
                    name: '进口棉¥',
                    id: 3
                }, {
                    name: '进口棉$',
                    id: 4
                }],
                active: 0,
                list: [],
                showBJ:false
            }
        },
        
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.getParams(vm);
            })
        },
        methods: {
            change(index) {
                this.list = [];
                for (let i = 0; i < index + 1; i++) {
                    this.list.push({
                        name: ''
                    });
                }
            },
            getParams(vm) {
                this.showBJ =vm.$route.params.showBJ;            }
        },
        watch: {
            // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
            '$route': 'getParams'
        },
        created() {
            this.change(0);
        }
    }
</script>

<style scoped lang='less'>
    .mytab {
        .van-tab--active {
            color: #fff !important;
        }
    }
    .btns{
        position: fixed;
        bottom:50px;
        width: 100%;
        text-align: center;
        >div{
            background:rgba(0, 153, 204, 0.6);
            color: #fff;
            width: 8em;
            font-size: 18px;
            margin: 0 auto;
            padding: 0.5em;
            border-radius: 5px;

        }
    }
</style>